<template>
	<div class="header-index">
		<el-row class="elrow">
			 <el-button 
			 	type="primary" 
			 	icon="el-icon-edit" 
			 	circle 
			 	@click="addshow"
			 ></el-button>
			 <el-button 
			 	type="success" 
			 	icon="el-icon-check" 
			 	circle
			 ></el-button>
  <el-input placeholder="请输入内容" v-model="input5" class="input-with-select">
    <el-select v-model="select" slot="prepend" placeholder="请选择">
      <el-option label="餐厅名" value="1"></el-option>
      <el-option label="订单号" value="2"></el-option>
      <el-option label="用户电话" value="3"></el-option>
    </el-select>
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>
		</el-row>
		<!--添加页面-->
		<div 
			class="bgstyle" 
			v-show="clickshow"
		>
		     <!--头部-->
		     <div class="header-title">合作公司信息</div>
		     <div class="add-content">
		     	<div 
			 	class="inputStyle" 
			 	style="margin-top:.1rem"
				 >
				 	<span class="title">
				 		客户名称:
				 		<span class="my-icon-hongdian iconfont icon-color"></span>
				 	</span>
				 	 <el-tooltip class="item" effect="dark" content="该项目为必输项" placement="top-end">
					 	<el-input
						    placeholder="请输入客户名称"
							v-model="inputs.input1"
							autocomplete="off"
							clearable
						>
						</el-input>
					</el-tooltip>
				 </div>
			     <div class="inputStyle">
				 	<span class="title">联系人:</span>
				 	<el-input
					    placeholder="请输入联系人"
						v-model="inputs.input2"
						autocomplete="off"
						clearable
					>
					</el-input>
				 </div>      
				 <div class="inputStyle">
				 	<span class="title">电话:</span>
				 	<el-input
					    placeholder="请输入电话"
						v-model="inputs.input3"
						maxlength=11
						autocomplete="off"
						clearable
					>
					</el-input>
				 </div>  
				 <div class="inputStyle">
				 	<span class="title">组织机构:</span>
				 	<el-select 
				 		v-model="inputs.selectvalue" 
				 		placeholder="请选择"
				 	>
					    <el-option
					      v-for="item in options"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
					</el-select>
				 </div> 
				 <el-row>
				 	 <el-button type="primary" :disabled='dbshow' @click="SubmitData">提交</el-button>
				 	 <el-button type="info" @click="addshow">取消</el-button>
				 </el-row>
		     </div>
		     
		</div>
	</div>
</template>

<script>
	import {debounce} from '@/common/commons.js'
	import { mapState,mapMutations } from 'vuex'
	export default {
		name:"companyheader",
		data(){
	       return {
	       	  options: [{
		          value: '东莞松山湖',
		          label: '东莞松山湖'
		        }, {
		          value: '南昌分公司',
		          label: '南昌分公司'
		        }],
			   select:"",
               clickshow:false,
               dbshow:true,
               inputs:{
               	   input1:'',
	               input2:'',
	               input3:'',
	               selectvalue:'',
	               date:null
               },
               timer:null
               
	       }
		},
		methods:{
			selectGO(){
				console.log("查询");
			},
			//显示隐藏添加模块
			addshow(){
				this.clickshow = !this.clickshow
			},
			SubmitData(){
				const _this = this
				if(_this.inputs.input1){
					if(_this.timer){
						clearTimeout(_this.timer)
					} 
					_this.timer = setTimeout(()=>{
				    let qs = require('qs')
					_this.inputs.date = _this.common.getTimer()
					this.axios.post('http://192.168.0.101:5050/Coltd/',
						qs.stringify(_this.inputs)	
					).then(res => {
						if(res.data.code == 1){
							_this.clickshow = false
						    _this.$message({
					          message: '添加成功',
					          type: 'success'
					       });
//					       console.log(this.isRouterAlive)
					       this.changeisRouter(false)
					       this.$nextTick(function(){
					       	 this.changeisRouter(true)
					       })
						}else{
							_this.$message({
					          message: '添加失败',
					          type: 'warning'
					        });
						}
					})
				  },300)
				}
			},
			...mapMutations(['changeisRouter'])
		},
		computed:{
			...mapState(['isRouterAlive'])
		},
		created(){
			
		},
		mounted(){
			this.$watch('inputs.input1',debounce((newValue)=>{
				if(newValue){
					this.inputs.input1 = newValue
					this.dbshow = false
				}else{
					this.dbshow = true
				}
				},100)),
			this.$watch('inputs.input2',debounce((newValue)=>{
					this.inputs.input2 = newValue
				},1000)),
			this.$watch('inputs.input3',debounce((newValue)=>{
					this.inputs.input3 = newValue
				},1000))
		}
	}
</script>

<style scoped>
	.header-index{
		margin-bottom: 0.2rem;
		margin-left:0.2rem;
		position:relative;
	}
	.header-index >>> .el-button.is-circle {
		padding:0.1rem;
	}
	.header-index .bgstyle >>> .el-button{
		flex:1;
	}
	.header-index .bgstyle >>> .el-button:nth-child(1){
		border-bottom-right-radius:0;
		border-top-right-radius:0;
	}
	.header-index .bgstyle >>> .el-button:nth-child(2){
		border-bottom-left-radius:0;
		border-top-left-radius: 0;
	}
	.header-index .bgstyle >>> .el-row{
		display: flex;
	}
	.header-index .bgstyle >>> .el-button+.el-button{
		margin-left:0;
	}
	.bgstyle{
		width:10rem;
		border-radius: 0.2rem;
		background:#fff;
		border: .02rem solid #eaeaea;
    	box-shadow: 0 0 0.5rem #cac6c6; 
		position: absolute;
		z-index: 11111;
		top:50%;
		left:50%;
        transform: translate(-50%,20%);
        overflow: hidden;
	}
	.add-content{
		padding: 0.3rem;
	}
	.inputStyle{
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-bottom:.4rem;
	}
	.inputStyle .title{
		flex-direction: row-reverse;
		display: flex;
		padding-right:.1rem;
		text-align: right;
        flex-basis:1.6rem;
        color:#999;
	}
	.header-index >>> .el-select{
		width:100%;
	}
	.index .header-title{
		width:100%;
		height:.8rem;
		background:#20A0FF;
		position:relative;
		text-align: center;
		line-height: .8rem;
		color:#fff;
		font-size: 0.34rem;
		font-weight: bold;
	}
	.icon-color{
		color:red;
		position:absolute;
	    left:.1rem;
	}
  	.header-index .elrow >>> .el-input__inner{
		height:.7rem;
	}
	.header-index .elrow >>> .el-select .el-input {
		width: 2.5rem;
	}
	.header-index .elrow >>> .input-with-select .el-input-group__prepend {
		background-color: #fff;
	}
	.header-index .elrow >>> .el-input{
		width:0;
		margin-left:.4rem
	}
</style>